<template>
  <div id="app">
    <Navbar />
    <main>
      <section class="qa-section">
        <h1>问答</h1>
        <div v-for="(qaItem, index) in qaList" :key="index" class="qa-item">
          <h2 class="qa-question">{{ qaItem.question }}</h2>
          <p class="qa-answer">{{ qaItem.answer }}</p>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar/Navbar.vue";
import Footer from "@/components/Footer/Footer.vue";

// 模拟问答数据
const qaList = [
  {
    question: "你们公司能开发哪些类型的软件？",
    answer: "我们公司可以开发多种类型的软件，包括但不限于企业级管理软件、电商平台软件、数据分析软件、移动应用等。我们拥有专业的技术团队，能够根据客户的具体需求进行定制化开发。"
  },
  {
    question: "大数据分析服务具体包含哪些内容？",
    answer: "我们的大数据分析服务涵盖数据采集、清洗、存储、分析和可视化等多个环节。通过对海量数据的深入挖掘，我们可以帮助客户发现潜在的商业机会，优化业务流程，提高决策的科学性和准确性。"
  },
  {
    question: "网站设计服务的流程是怎样的？",
    answer: "我们的网站设计服务流程一般包括需求调研、原型设计、UI 设计、前端开发、后端开发、测试和上线等阶段。在每个阶段，我们都会与客户保持密切沟通，确保最终的网站能够满足客户的期望和需求。"
  }
];
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.qa-section {
  padding: 40px;
}

.qa-item {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.qa-question {
  margin-bottom: 10px;
  color: #333;
}

.qa-answer {
  line-height: 1.6;
  color: #666;
}
</style>